<template>
    <div class="card rdsp-card-view"  data-page="communicatServer">
      <div class="card-content ">
        <div class="server-card-title card-header rdsp-card-title">通信服务器实时监测</div>
        <div id="testChart2">

        </div>
        <div id="chart2-server-content">
          <div class="card-comm-font">通信服务器总数</div>
          <div id="communicatServer-total-num">
            <span id="communicatServer-total-val"></span>
            <span id="communicatServer-total-unit">个</span>
          </div>
        </div>
        <div id="chart2-content">
          <div id="communicatServer-online-num" class="row">
            <div class="col" id="communicatServer-online-value"></div>
            <div class="col" id="communicatServer-online-percent"></div>
          </div>
          <div class="row" id="communicatServer-offline-num">
            <div class="col" id="communicatServer-offline-value"></div>
            <div class="col" id="communicatServer-offline-percent"></div>
          </div>
        </div>
      </div>
      <div class="list communicatServer-list">
        <ul id="serverContent">

        </ul>
      </div>

      <!--更多按钮-->
      <a href="/communicatServerList/" class="morelist"  data-view=".view-main">
        <i class="iconfont app-icon-down icon-xiala"></i>
      </a>
    </div>

</template>
<style scoped>
#communicatServer-total-unit{
  font-size: 12px;
}
#serverContent li{
  position: relative;
  margin-left: 28px;
  margin-right: 32px;
  width: 100%;
}
.server-pic{
  padding-left:28px;
  width: 32px;
  height: 32px;
  position: relative;
  text-align: center;
}
.server-pic1{
  display:block;
  background-image:url(./img/home/offline_server.png);
  background-repeat: no-repeat;
  background-position:center;
}
.server-pic2{
  display:block;
  background-image:url(./img/home/online_server.png);
  background-repeat: no-repeat;
  background-position:center;
}
.server-name{
  text-align: left;
  height: 20px;
  width: 160px;
  position: relative;
  right: -32px;
  bottom: 11px;
  font-size: 14px;
}
.server-address{
  height: 20px;
  width: 160px;
  position: relative;
  left: 32px;
  bottom: 8px;
  font-size: 12px;
  text-align: left;
}
.server-online{
  height: 20px;
  position: absolute;
  right: 50px;
  bottom: 22px;
  font-size: 18px;
  color: #999;
}

.server-card-title{
 padding-left:14px;
 font-size: 14px;
}
.morelist{
  width: 100%;
  height: 30px;
  line-height:35px;
  display: inline-block;
  text-align: center;
}
.communicatServer-list{
  /*height: 192px;*/
  clear: both;
}
.md .list .line{
  font-size: 28px;
  padding-right: 10px;
  line-height: 0px;
}
#testChart2{
  width: 360px;
  height: 160px;
  position: relative;
}
#chart2-content{
  position: absolute;;
  left: 226px;
  top: 142px;
}
#chart2-server-content{
  position: absolute;
  left: 161px;
  top: 74px;
}
#communicatServer-total-num{
  font-size: 20px;
}
#communicatServer-online-num{
  color:#5683ef;
  position: relative;
  width: 80px;
  margin-left: 20px;
}
#communicatServer-online-percent{
  /*width: 60px;*/
  /*padding-right: 5px;*/
  /*text-align: right;*/
  /*position: absolute;*/

}
#communicatServer-online-value{
  /*position: absolute;*/
  /*right: -100px;*/
}
#communicatServer-offline-num{
  color:#6fc7f5;
  position: relative;
  width: 80px;
  margin-left: 20px;
}
#communicatServer-offline-percent{
  /*width: 60px;*/
  /*padding-right: 5px;*/
  /*text-align: right;*/
  /*position: absolute;*/
  /*bottom: -44px;*/
}
#communicatServer-offline-value{
  /*position: absolute;*/
  /*bottom: -44px;*/
  /*right: -100px;*/
}
#serverContent:before, #serverContent:after {
  height: 0px !important;
  width: 0px !important;
}

.md .list ul:before {
  height: 0px !important;
  width: 0px !important;
}

.md .list ul:after {
  height: 0px !important;
  width: 0px !important;
}
#serverContent .item-inner:last-child:after{
  width:0px;
}

</style>
<script>
  return {
    beforeCreate() {
      $("#testChart2").empty();
    },
    methods: {
      getServerInfo: function () {
              var self = this;
              var $ = self.$;
            Dao.getUitbStatusCount({
                userName:userInfor.accountName,
                deviceId:appKeyObj.deviceId,
                organizationId:userInfor.organizationIds,
            }, function (data) {
                var line_num=0;
                if (data.details.length>3){
                    line_num=3;
                }else {
                    line_num=data.details.length;
                }
              for (var i = 0; i < line_num; i++) {
                if(data.details[i].isOnline==0){
                  $("#serverContent").append(
                    '<li class="item-inner"><div class="item-content server-pic server-pic1">'
                    +'<div class="item-media"></div><div class="">'
                    +'<div class="server-name">' +data.details[i].organizationName
                    + '</div><div class="server-address">'+data.details[i].name
                    +'</div></div></div>'
                    +'<div class="server-online">离线</div></li>' );
                } else {
                  $("#serverContent").append('<li class="item-inner"><div class="item-content server-pic server-pic2">'
                    +'<div class="item-media"></div>'
                    +'<div class=""><div class="server-name">'
                    +data.details[i].organizationName
                    +'</div><div class="server-address">'
                    +data.details[i].name
                    +'</div></li>');
                }

              }
              self.drawChart(data);
            });
          },
          drawChart:function(data){
            var onLineNum;
            var offLineNum;
            var totalNum;
            var onLinePercent;
            var offLinePercent;

              onLineNum=data.online;
              offLineNum=data.offline;
              totalNum=onLineNum*1+offLineNum*1;
              onLinePercent=(onLineNum/totalNum*100).toFixed(1);
              offLinePercent=(offLineNum/totalNum*100).toFixed(1);
              $("#communicatServer-total-val").append(totalNum+'');
              $("#communicatServer-online-percent").append(onLinePercent+'%');
              $("#communicatServer-online-value").append(onLineNum+'个');
              $("#communicatServer-offline-percent").append(offLinePercent+'% ');
              $("#communicatServer-offline-value").append(offLineNum+'个');
              var arr=[];
              arr.push({
                name : '在线',
                value:onLineNum
              });
              arr.push({
                name : '离线',
                value:offLineNum
              });
              var carChart = echarts.init(document.getElementById('testChart2'));
              carChart.setOption({
                title : null,
                tooltip : {
                  trigger: 'item',
                  formatter: "{a} <br/>{b} : {c} ({d}%)",
                  position:['50%', '50%']
                },
                legend: {
                  orient: 'vertical',
                  x :160,
                  y :90,
                  data:  [{
                                name: '在线',
                                // 强制设置图形为圆。
                                icon: 'square',
                                // 设置文本为红色
                                textStyle: {
                                  color: '#5683ef'
                                }
                              },{
                                name: '离线',
                                // 强制设置图形为圆。
                                icon: 'square',
                                // 设置文本为红色
                                textStyle: {
                                  color: '#65b8e4'
                                }
                              }]
                            },
                            series : [
                            {
                              name: '通信服务器实时状态',
                              type: 'pie',
                              radius : [20, 60],
                              center: ['24%', '50%'],
                              data:arr,
                              label: {
                                normal: {
                                  show: false,
                                  position: 'right'
                                },
                                emphasis: {
                                  show: false,
                                  textStyle: {
                                    fontSize: '18',
                                    fontWeight: 'bold'
                                  }
                                }
                              },
                              itemStyle: {
                                emphasis: {
                                  shadowBlur: 10,
                                  shadowOffsetX: 0,
                                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                              },
                            }
                            ],
                            color: ['#5683ef','#6fc7f5']
                          });
          }
        },
        on: {
          pageAfterIn: function(e, page) {
            var self = this;
            self.getServerInfo();//获取服务器信息
          }
        }
      }
    </script>